<template>
  <div class="digital-human-footer">
    <div class="footer-content">
      <!-- 左侧控制按钮 -->
      <div class="control-group left">
        <button
          class="control-btn"
          :class="{ active: !microphoneMuted }"
          @click="$emit('toggleMicrophone')"
          :title="microphoneMuted ? '开启麦克风' : '关闭麦克风'"
        >
          <svg v-if="!microphoneMuted" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/>
            <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
          </svg>
          <svg v-else viewBox="0 0 24 24" fill="currentColor">
            <path d="M19 11h-1.7c0 .74-.16 1.43-.43 2.05l1.23 1.23c.56-.98.9-2.09.9-3.28zm-4.02.17c0-.06.02-.11.02-.17V5c0-1.66-1.34-3-3-3S9 3.34 9 5v.18l5.98 5.99zM4.27 3L3 4.27l6.01 6.01V11c0 1.66 1.33 3 2.99 3 .22 0 .44-.03.65-.08l1.66 1.66c-.71.33-1.5.52-2.31.52-2.76 0-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c.57-.08 1.12-.23 1.64-.46l2.36 2.36L21 18.73 4.27 3z"/>
          </svg>
        </button>
      </div>

      <!-- 中央通话按钮 -->
      <div class="control-group center">
        <button
          v-if="callState === 'None'"
          class="call-btn start-call"
          @click="$emit('startCall')"
        >
          <svg viewBox="0 0 24 24" fill="currentColor">
            <path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/>
          </svg>
          <span>开始通话</span>
        </button>

        <button
          v-else-if="callState === 'Connected'"
          class="call-btn end-call"
          @click="$emit('stopCall')"
        >
          <svg viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08c-.18-.17-.29-.42-.29-.7 0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.7l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.1-.7-.28-.79-.73-1.68-1.36-2.66-1.85-.33-.16-.56-.51-.56-.9v-3.1C15.15 9.25 13.6 9 12 9z"/>
          </svg>
          <span>结束通话</span>
        </button>

        <button
          v-else
          class="call-btn connecting"
          disabled
        >
          <div class="loading-spinner"></div>
          <span>连接中...</span>
        </button>
      </div>

      <!-- 右侧功能按钮 -->
      <div class="control-group right">
        <button
          class="control-btn"
          @click="toggleSpeaker"
          :title="speakerOn ? '关闭扬声器' : '开启扬声器'"
        >
          <svg v-if="speakerOn" viewBox="0 0 24 24" fill="currentColor">
            <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
          </svg>
          <svg v-else viewBox="0 0 24 24" fill="currentColor">
            <path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
          </svg>
        </button>

        <button
          class="control-btn"
          @click="showSettings"
          title="设置"
        >
          <svg viewBox="0 0 24 24" fill="currentColor">
            <path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- 说话状态指示器 -->
    <div v-if="isSpeaking" class="speaking-indicator">
      <div class="speaking-waves">
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
      </div>
      <span>正在说话...</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// Props
interface Props {
  callState: 'None' | 'Connecting' | 'Connected' | 'Error'
  isSpeaking: boolean
  microphoneMuted: boolean
}

defineProps<Props>()

// Emits
defineEmits<{
  startCall: []
  stopCall: []
  toggleMicrophone: []
}>()

// 响应式数据
const speakerOn = ref(true)

// 方法
const toggleSpeaker = () => {
  speakerOn.value = !speakerOn.value
}

const showSettings = () => {
  // 显示设置对话框
  console.log('Show settings')
}
</script>

<style scoped>
.digital-human-footer {
  position: relative;
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  border-radius: 1rem;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.control-group.center {
  flex: 1;
  justify-content: center;
}

.control-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.control-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

.control-btn.active {
  background: rgba(255, 255, 255, 0.2);
  border-color: #4CAF50;
  color: #4CAF50;
}

.control-btn svg {
  width: 20px;
  height: 20px;
}

.call-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 140px;
  justify-content: center;
}

.call-btn svg {
  width: 20px;
  height: 20px;
}

.start-call {
  background: #4CAF50;
  color: white;
}

.start-call:hover {
  background: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.end-call {
  background: #f44336;
  color: white;
}

.end-call:hover {
  background: #da190b;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}

.connecting {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  cursor: not-allowed;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.speaking-indicator {
  position: absolute;
  top: -3rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  padding: 0.5rem 1rem;
  border-radius: 1.5rem;
  color: white;
  font-size: 0.875rem;
}

.speaking-waves {
  display: flex;
  gap: 2px;
}

.speaking-waves .wave {
  width: 3px;
  height: 12px;
  background: #4CAF50;
  border-radius: 1.5px;
  animation: wave-animation 1s ease-in-out infinite;
}

.speaking-waves .wave:nth-child(1) { animation-delay: 0s; }
.speaking-waves .wave:nth-child(2) { animation-delay: 0.1s; }
.speaking-waves .wave:nth-child(3) { animation-delay: 0.2s; }

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes wave-animation {
  0%, 100% {
    height: 12px;
    opacity: 0.5;
  }
  50% {
    height: 20px;
    opacity: 1;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .footer-content {
    padding: 0.75rem;
    gap: 0.5rem;
  }

  .control-group {
    gap: 0.5rem;
  }

  .control-btn {
    width: 40px;
    height: 40px;
  }

  .control-btn svg {
    width: 16px;
    height: 16px;
  }

  .call-btn {
    padding: 0.5rem 1rem;
    min-width: 120px;
    font-size: 0.875rem;
  }

  .call-btn svg {
    width: 16px;
    height: 16px;
  }
}
</style>
